import { defineComponent, reactive } from "vue";
import styles from "./userinfo.module.less";
import { CheckCircleFilled } from "@ant-design/icons-vue";
import { useStore as useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
export default defineComponent({
  name:'accountUserinfo',
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const state = reactive({
      mobile: userStore.user_info.mobile
    });

    // 跳转路由path
    const toPath = (path: string) => {
      router.push(path);
    };

    return () => (
      <div class={styles.userinfo}>
        <div class={styles.enterinfo}>
          账户安全
        </div>
        <div class={styles['account-security']}>
          <div class={styles['security-item']}>
            <div class={styles['item-col']}>
              <CheckCircleFilled class={styles.icon} />
              <span>登陆密码</span>
            </div>
            <div class={styles['item-col']}>
              <span>密码等级：中</span>
            </div>
            <div class={styles['item-col']}>
              <span class={styles.edit} onClick={()=>{ toPath('/account/userinfo/changePassword/authenticate') }}>修改</span>
            </div>
          </div>
          <div class={styles['security-item']}>
            <div class={styles['item-col']}>
              <CheckCircleFilled class={styles.icon} />
              <span>手机号绑定</span>
            </div>
            <div class={styles['item-col']}>
              <span>已验证：{state.mobile.slice(0,3)+'****'+state.mobile.slice(-4)}</span>
            </div>
            <div class={styles['item-col']}>
              <span class={styles.edit} onClick={()=>{ toPath('/account/userinfo/BindMobilePhone/authenticate') }}>修改</span>
            </div>
          </div>
        </div>
      </div>
    )
  }
})